<template>
  <div class="carousel">
    <el-carousel
      :interval="5000"
      arrow="never"
      indicator-position="none"
      direction="vertical"
      height="100%"
    >
      <el-carousel-item>
        <div class="sliderimg">
          <img src="https://api.ixiaowai.cn/gqapi/gqapi.php" />
        </div>
      </el-carousel-item>
      <el-carousel-item>
        <div class="sliderimg">
          <img src="https://api.ixiaowai.cn/gqapi/gqapi.php" />
        </div>
      </el-carousel-item>
      <el-carousel-item>
        <div class="sliderimg">
          <img src="https://api.ixiaowai.cn/gqapi/gqapi.php" />
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script lang="ts">
export default {
  data() {
    return {
      imgheight: 1500,
    };
  },
};
</script>

<style scoped>
.sliderimg {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  display: inline-block;
}

.el-carousel,
.carousel {
  height: 100%;
}
</style>
